<template>
  <div class="search">
    <div class="desc">
      <p>亲爱的{{$store.state.user}}你好啊，我是人工智能设计机器人小美，我将为你自动生成落地页~</p>
    </div>
    <div class="key-desc">
      <p>先回答一个问题</p>
    </div>
    <div class="key-title">
      <p>这个落地页对应的投放关键词是：</p>
      <input type="text" v-model="keyword">
    </div>
    <div class="generate" @click="generate">
      自动生成
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      keyword: ""
    };
  },
  methods: {
    generate() {
      var flag = this.keyword;
      // if (["1", "2", "3", "4"].indexOf(flag) > 0) {
      //   this.$router.push({ path: "/result_" + flag });
      // } else {
      //   this.$router.push({ path: "/result_1" });
      // }
      this.$http({
        url: "web/loadPage/createLoadPage",
        method: "post",
        data: {
          keyName: this.keyword
        },
        withCredentials: true
      })
        .then(res => {
          if (res.data.success === false) {
            alert(res.data.error);
          } else {
            let id = res.data.data.id;
            this.$http({
              url: "web/loadPage/getLoadPage",
              method: "post",
              data: {
                id: id
              },
              withCredentials: true
            })
              .then(res1 => {
                if (res1.data.success === false) {
                  alert(res1.data.error);
                } else {
                  this.$store.commit("getContent", res1.data.data.content);
                  this.$router.push({ path: "/result" });
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.search {
  width: 800px;
  height: 600px;
  // border: 1px solid black;
  margin: 0 auto;
  .desc {
    margin: 40px;
  }
  .key-desc {
    margin: 40px;
  }
  .key-title {
    font-size: 30px;
    margin: 50px;
    input {
      border-bottom: 1px solid black;
      width: 500px;
      margin-left: 50px;
    }
  }
  .generate {
    height: 50px;
    width: 100px;
    background-color: rgba(22, 155, 213, 1);
    line-height: 50px;
    text-align: center;
    margin-left: 80px;
  }
}
</style>